<div class="wrapper wrapper-content" ng-controller="VirtualPowerPlantMasterController">
	<div class="row">
		<div class="col-lg-12">
			<div class="tabs-container">
				<uib-tabset>
					<uib-tab heading="{{'COMMON.VIRTUAL_POWER_PLANT' | translate}}">
						<div class="panel-body" ng-controller="VirtualPowerPlantController">
							<a ng-click="addVirtualPowerPlant()" class="btn btn-primary btn-rounded  btn-outline" href=""><i class="fa fa-plus-circle"></i> {{'SETTING.ADD_VIRTUAL_POWER_PLANT' | translate}}</a>
							<a ng-click="importVirtualPowerPlant()" class="btn btn-primary btn-rounded  btn-outline" href=""><i class="fa fa-plus-circle"></i> {{'SETTING.IMPORT' | translate}}</a>
							<table class="footable table table-bordered table-hover" data-sort="true" data-page-size="15">
								<thead>
									<tr>
										<th class="text-center" data-type="numeric">{{'SETTING.ID' | translate}}</th>
										<th class="text-center">{{'SETTING.NAME' | translate}}</th>
										<th class="text-center">{{'SETTING.COSTCENTER' | translate}}</th>
										<th class="text-center">{{'VIRTUAL_POWER_PLANT.BALANCING_PRICE_POINT' | translate}}</th>
										<th class="text-center">{{'SETTING.DESCRIPTION' | translate}} ({{'SETTING.OPTIONAL' | translate}})</th>
										<th class="text-center">{{'SETTING.ACTION' | translate}}</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="virtualpowerplant in virtualpowerplants">
										<td class="text-center">{{ virtualpowerplant.id }}</td>
										<td class="text-center">{{ virtualpowerplant.name }}</td>
										<td class="text-center">{{ virtualpowerplant.cost_center.name }}</td>
										<td class="text-center">{{ virtualpowerplant.balancing_price_point.name }}</td>
										<td class="text-center">{{ virtualpowerplant.description }}</td>
										<td class="text-center">
											<a ng-click="editVirtualPowerPlant(virtualpowerplant)" class="btn btn-primary btn-rounded btn-xs" >{{'SETTING.EDIT' | translate}}</a>
											<a ng-click="deleteVirtualPowerPlant(virtualpowerplant)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>
											<a ng-click="exportVirtualPowerPlant(virtualpowerplant)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.EXPORT' | translate}}</a>
											<a ng-click="cloneVirtualPowerPlant(virtualpowerplant)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.CLONE' | translate}}</a>
										</td>
									</tr>
								</tbody>
								<tfoot class="hide-if-no-paging">
									<tr>
										<td colspan="6">
											<ul class="pagination pull-right"></ul>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</uib-tab>
					<uib-tab heading="{{'SETTING.BIND_MICROGRID' | translate}}">
							<div class="panel-body" ng-controller="VirtualPowerPlantMicrogridController">
								<div class="row">
									<div class="col-lg-3">
										<div class="panel panel-info">
											<div class="panel-heading">
												{{'COMMON.VIRTUAL_POWER_PLANT' | translate}}
											</div>
											<div class="panel-body">
													<form role="form">
													<div class="form-group no-margin"><label>{{'SETTING.SELECT_VIRTUAL_POWER_PLANT' | translate}}</label>
														<ui-select  on-select="changeVirtualPowerPlant($item,$model)" ng-model="currentVirtualPowerPlant.selected" theme="bootstrap">
															<ui-select-match placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
															<ui-select-choices repeat="virtualpowerplant.id as virtualpowerplant in virtualpowerplants | filter: $select.search">
																<div ng-bind-html="virtualpowerplant.name | highlight: $select.search"></div>
															</ui-select-choices>
														</ui-select>
													</div>
												</form>
											</div>
										</div>
									</div>
									<div class="col-lg-4">
										<div class="panel panel-primary">
											<div class="panel-heading">
												{{currentVirtualPowerPlant.name}}{{'SETTING.N_S_MICROGRID' | translate}}
											</div>
											<div class="panel-body"
											    x-hjc-drop-target="true"
											    x-on-drop="pairMicrogrid(dragEl,dropEl)"
											    uib-tooltip="{{'SETTING.DRAG_TO_UNBIND' | translate}}" >

												<div class="btn btn-primary btn-rounded btn-block"
												    title="{{'COMMON.VIRTUAL_POWER_PLANT' | translate}}:{{virtualpowerplantmicrogrid.data_source.name}}"
												    ng-repeat="virtualpowerplantmicrogrid in virtualpowerplantmicrogrids"
												    x-hjc-draggable="true"> {{virtualpowerplantmicrogrid.name}}
											</div>
										</div>
									</div>
									<div class="panel panel-danger">
										<div class="panel-heading">
											{{'SETTING.TRASH' | translate}}
										</div>
										<div class="panel-body trash" >
											<img class="trashcan"
											src="img/trashcan.png"
											x-hjc-drop-target="true"
											x-on-drop="deleteMicrogridPair(dragEl,dropEl)">
										</div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="panel panel-info">
										<div class="panel-heading">
											{{'SETTING.SELECT_MICROGRID' | translate}}
										</div>
										<div class="panel-body" slim-scroll box-height="765px"
										uib-tooltip="{{'SETTING.DRAG_TO_BIND' | translate}}">
											<h5>{{'SETTING.MICROGRID_LIST' | translate}}</h5>
											<div class="source btn btn-info btn-rounded btn-block"
											ng-repeat="microgrid in microgrids"
											x-hjc-draggable="true"> {{microgrid.name}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</uib-tab>
				</uib-tabset>
			</div>
		</div>
	</div>
</div>
